<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../引入vue2.js"></script>
</head>

<body>
    <div id='app'>
        <ul>
            <li v-for="item in list" :key="item">
                {{item}}
            </li>
        </ul>
        <button @click="click">click</button>
    </div>
</body>
<script>
    /* 
        VUE 对数组的方法进行了重写
        数组更新检测
            1. 使用一下方法操作数组，原数组发生变化，可以检测变动。
                push()    末尾追加 
                pop()     删除最后一个
                shift()   删除第一个 
                unshift() 头部添加元素 
                splice()  删除或替换元素
                sort()    排序
                reverse() 翻转 
            2. 使用一下方法操作数组，原数组不变，
                重新赋值后，新数组替换旧数组，才能检测变化     
                filter() 过滤 
                concat() 合并 
                slice()  切割 
                map()    映射
            3. 不能检测一下变动的数组(vue3 不存在该情况)
                vm.list[index] = newValue;
                解决方案：
                    1. Vue.set(list,index,value);    
                    2. splice
    */

    let vm = new Vue({
        el: '#app',
        data: {
            list: ['a', 'b', 'c', 'd']
        },
        methods: {
            // 点击按钮，通过数组的方法操作数据。
            click() {
                // 原数组发生变化
                // this.list.push('f');
                // console.log(this.list);

                // 原数组没有发生变化,需要重新赋值
                // this.list = this.list.concat('f', 'e')
                // console.log(this.list);

                // vue2 检测不到
                // this.list[0] = '剑圣';
                // console.log(this.list);

                // 解决方案
                // Vue.set(this.list,0,'剑圣')
                this.list.splice(0,1,'剑圣')
            }
        }
    });
</script>

</html>